<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Marquee的使用</title>
        <style type="text/css">
            body,html {
                padding: 0;
                margin: 0;
                text-align: center;
                background-color: #f5f5f5;
            }
            a,a:hover {
                text-decoration: none;
            }
            marquee {
                width: 60%;
                margin:20px auto;
                border: 1px solid red;
                border-radius: 4px;
            }
            /* 公告样式 */
            .notice-wrapper {
                height: 500px;
            }
            .notice-wrapper .notice {
                background-color: #48eeec;
                width: 60%;
                height:170px ;
                margin: auto;
                text-align: center;
                border-radius: 10px;
            }
            .notice-wrapper .notice .context {
                margin: auto;
                text-align: center;
            }
            /* 超链接样式 */
            .link {
                margin: 0 auto;
                height: 50px;
            }
            .link a {
                display: block;
                margin:0 auto;
                width: 10%;
                text-align: center;
            }
            /* 从上至下图片部分样式 */
            .image {
                height: 100px;
                text-align: center;
            }
            /* 从右至左图片部分样式 */
            .image-right {
                height: 100px;
            }
        </style>
    </head>
    <body>
        <h3>从下向上 公告内容的滚动</h3>
        <marquee class="notice-wrapper" direction="up" behavior="slide" >
            <div class="notice">
                <h2>公告</h2>
                <div class="context">
                    桃花坞里桃花庵，桃花庵下桃花仙；桃花仙人种桃树，又摘桃花卖酒钱。<br>
                    酒醒只在花前坐，酒醉还来花下眠；半醒半醉日复日，花落花开年复年。<br>
                    但愿老死花酒间，不愿鞠躬车马前；车尘马足富者趣，酒盏花枝贫者缘。<br>
                    若将富贵比贫贱，一在平地一在天；若将贫贱比车马，他得驱驰我得闲。<br>
                    别人笑我太疯癫，我笑他人看不穿；不见五陵豪杰墓，无花无酒锄作田。<br>
                </div>
            </div>
        </marquee>
        <h3>从下向上 超链接的滚动</h3>
        <marquee class="link" direction="up" scrollamount="10px" scrolldelay="1">
            <a href="">百度传送门</a>
        </marquee>
        <marquee class="link" direction="down" scrollamount="10px" scrolldelay="1">
            <a href="">谷歌传送门</a>
        </marquee>
        <marquee class="link" direction="up" scrollamount="10px" scrolldelay="1">
            <a href="">火狐传送门</a>
        </marquee>
        <h3>从下向上 图片的滚动</h3>
        <marquee class="image" direction="up" behavior="alternate" >
            <img src="https://www.baidu.com/img/baidu_jgylogo3.gif" width="101px" height="33px">
        </marquee>
        <h3>从右向左 图片的滚动</h3>
        <marquee class="image-right" direction="right" behavior="alternate" style="line-height: 100px">
            <img src="https://www.baidu.com/img/baidu_jgylogo3.gif" width="101px" height="33px">
        </marquee>
    </body>
</html>